import React, { useState } from 'react';
import { Modal, Form } from 'antd';
import { Pie } from '@ant-design/charts';
import { Tabs } from 'antd';
import { useEffect } from 'react';
const Echarts = (props) => {
  const { visible = false, onClose, reload } = props;
  const { show, details = {} } = visible;
  const [data, setData] = useState([]);
  const [activeKey, setActiveKey] = useState(null);
  const modalProps = {
    title: `用户画像`,
    width: 1200,
    visible: typeof visible === 'boolean' ? visible : show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    okText: '刷新数据',
  };

  const { fansData = {} } = details;
  const { lastSyncTime } = fansData;
  console.log(fansData);
  useEffect(() => {
    if (show && activeKey === null) {
      handleList('activeDaysDistributions');
    } else if (!show) {
      setActiveKey(null);
    }
  }, [show, details]);
  const handleList = (e) => {
    console.log(fansData[e]);
    const EchartsData = fansData[e] ? JSON.parse(fansData[e]) : [];
    setActiveKey(e);
    if (e !== 'flowContributions') {
      setData(
        EchartsData.map((item) => {
          return {
            type: item.item,
            value: Number(item.value),
          };
        }),
      );
    } else {
      setData(
        EchartsData.map((item) => {
          return {
            type: item.flow,
            value: Number(item.all_sum),
          };
        }),
      );
    }
  };
  console.log(data);
  const config = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    label: {
      type: 'outer',
    },
    interactions: [
      {
        type: 'element-active',
      },
    ],
  };
  const tabList = [
    {
      label: '活跃天数分布',
      key: 'activeDaysDistributions',
      children: null,
    },
    {
      label: '年龄分布',
      key: 'ageDistributions',
      children: null,
    },
    {
      label: '设备分布',
      key: 'deviceDistributions',
      children: null,
    },
    {
      label: '流量贡献',
      key: 'flowContributions',
      children: null,
    },
    {
      label: '性别分布',
      key: 'genderDistributions',
      children: null,
    },
    {
      label: '地理分布',
      key: 'geographicalDistributions',
      children: null,
    },
  ];
  return (
    <Modal
      {...modalProps}
      onCancel={onClose}
      onOk={() => {
        reload && reload();
      }}
    >
      <Tabs
        onChange={(e) => {
          handleList(e);
        }}
        accessKey={activeKey}
        items={tabList}
      ></Tabs>
      <Pie {...config} />
      <div>最后更新时间{lastSyncTime}</div>
    </Modal>
  );
};

export default Echarts;
